<template>
  <div>
    <!-- 添加商品 -->
    <div class="tow">
      <a-card class="TCart">
          <!-- v-if,v-else -->
        <!-- 顶部时间轴 -->
        <!-- 1 -->
        <div v-if="page_switching ===1" class="top">
          <div class="top_one tt  fw">
            <div class="oo truePosition">1 </div>
            <div>填写商品信息</div>
          </div>

          <div class="top_two tt">
            <div class="oo truePosition ">2 <div class="truePosition line lineColor" /></div>
            <div>填写商品促销</div>
          </div>

          <div class="top_three tt">
            <div class="oo truePosition">3 <div class="truePosition line lineColor" /></div>
            <div>填写商品属性</div>
          </div>

          <div class="d tt">
            <div class="oo truePosition">4 <div class="line lineColor truePosition" /></div>
            <div>填写商品关联</div>
          </div>

        </div>
        <!-- 2 -->
        <div v-if="page_switching ===2" class="top">
          <div class="top_one tt  fontColorGreen">
            <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
            </div>
            <div>填写商品信息</div> 
          </div>

          <div class="top_twoB tt fw">
            <div class="oo truePosition ">2 <div class="truePosition line lineColor" /></div>
            <div>填写商品促销</div>
          </div>

          <div class="top_three tt">
            <div class="oo truePosition">3 <div class="truePosition line lineColor" /></div>
            <div>填写商品属性</div>
          </div>

          <div class="d tt">
            <div class="oo truePosition">4 <div class="line lineColor truePosition" /></div>
            <div>填写商品关联</div>
          </div>
        </div>
        <!-- 3 -->
        <div v-if="page_switching ===3" class="top">
          <div class="top_one tt  fontColorGreen">
            <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
            </div>
            <div>填写商品信息</div> 
          </div>

          <div class="top_twoC tt">
             <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
              <div class="truePosition lineTow goodLine" />
            </div>
            <div>填写商品促销</div>
          </div>

          <div class="top_threeB tt fw">
            <div class="oo truePosition">3 <div class="truePosition line lineColor" /></div>
            <div>填写商品属性</div>
          </div>

          <div class="d tt">
            <div class="oo truePosition">4 <div class="line lineColor truePosition" /></div>
            <div>填写商品关联</div>
          </div>
        </div>
        <!-- 4 -->
        <div v-if="page_switching ===4" class="top">
          <div class="top_one tt  fontColorGreen">
            <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
            </div>
            <div>填写商品信息</div> 
          </div>

          <div class="top_twoC tt">
             <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
              <div class="truePosition lineTow goodLine" />
            </div>
            <div>填写商品促销</div>
          </div>

          <div class="top_threeC tt">
             <div class="truePosition">
              <svg t="1666232827185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="200" height="200"><path d="M811.24864 372.41344a35.83488 35.83488 0 0 0-50.68288 0l-286.01344 286.00832-170.15808-170.15808a35.83488 35.83488 0 0 0-50.68288 0 35.83488 35.83488 0 0 0 0 50.68288l195.49696 195.49696 0.00512 0.00512a35.83488 35.83488 0 0 0 50.68288 0l311.35232-311.35232a35.83488 35.83488 0 0 0 0-50.68288z" fill="#25b113" p-id="1378"></path><path d="M512 133.12c208.91648 0 378.88 169.96352 378.88 378.88s-169.96352 378.88-378.88 378.88-378.88-169.96352-378.88-378.88 169.96352-378.88 378.88-378.88m0-71.68c-248.83712 0-450.56 201.72288-450.56 450.56s201.72288 450.56 450.56 450.56 450.56-201.72288 450.56-450.56-201.72288-450.56-450.56-450.56z" fill="#25b113" p-id="1379"></path></svg>
              <div class="truePosition lineTow goodLine" />
            </div>
            <div>填写商品属性</div>
          </div>

          <div class="top_fourB tt fw">
            <div class="oo truePosition">4 <div class="line lineColor truePosition" /></div>
            <div>填写商品关联</div>
          </div>
        </div>

        <!-- 信息填写栏 -->
        <a-form
          ref="formRef"
        >
          <!-- :model="formState"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol" -->
          <a-form-item ref="name" label="Activity name" name="name">
            <a-input v-model="formState.name" />
          </a-form-item>

          <a-form-item label="Activity zone" name="region">
            <a-select v-model="formState.region" placeholder="please select your zone">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="Activity form" name="desc">
            <a-textarea v-model="formState.desc" />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button ref="whiteNigger" type="default" @click="onSubmit">3213</a-button>
            <a-button ref="niggerBtn" type="primary" @click="onSubmit">3213</a-button>
          </a-form-item>
        </a-form>

      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  watch:{
    
  },
  data() {
    return {
      // formRef: ref(), // vue3写法，转换成响应式数据
      // 商品分类
      formState: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },

      // 表单规则
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
        type: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change'
          }
        ],
        resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      },

      // 页面切换控制数
      page_switching:1 //默认第一页
    }
  },

  methods: {
    onSubmit(e) {
      // console.log(e.target.innerText);
      // console.log(this.$refs.formRef)
      if(this.page_switching < 4){
        this.page_switching++
      }
      if(this.page_switching === 2){
        // console.log(132123);
        e.target.innerText = "kkk"
      }
    }
  }

}
</script>

<style lang="scss">
  .tow{
    position: relative;
    .TCart{
      position: relative;
      left: 50%;
      top: 90px;
      transform: translate(-56%,-6%);
      width: 790px;
      // 时间轴样式
      .top{
        display: flex;
        justify-content: center;
        div{
          width: 176px;
          height: 60px;
          text-align: center;
        }
        // 四个盒子默认公共样式
        // 小圆圈
        .oo{
           font-weight: 700;
           border: 2px solid #000;
           border-radius: 50%;
        }
        // 设置位置
        .truePosition{
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
        .tt{
          position: relative;
          :nth-child(1){
            position: relative;
            // left: 50%;
            // transform: translateX(-50%);
            // border: 2px solid #000;
            // border-radius: 50%;
            width: 25px;
            height: 25px;
            // font-weight: 700;

            //lineColor  and line
            .lineColor{
              border:0.5px solid rgb(169, 167, 167);
            }
            .goodLine{
              border:0.5px solid #25b113;
            }
            
            .line{
              border-radius: 0;
              position: absolute;
              top: 50%;
              left: -366%;
              height: 1px;
              width: 150px;
              display: inline-block;
              // border:0.5px solid rgb(169, 167, 167);
            }
          }
          :nth-child(2){
            margin-top: 13px;
            font-size: 16px;
            // font-weight: 700;
          }
        }

        .lineTow{
          height: 0.5px;
          position: relative;
          left: -75px;
          top: -31px;
          width: 152px;
        }
        

        // 第二个盒子字体加粗
        .fw{
          :nth-child(2){
            font-weight: 700;
          }
        }
        .fontColorGreen{
          color: #25b113;
        }
       
        .top_two{
          :nth-child(1){
            color: rgb(169, 167, 167);
            border-color: rgb(169, 167, 167);
          }
          :nth-child(2){
            color: rgb(169, 167, 167);
            // font-weight:normal;
          }
        }

         .top_twoB{
          :nth-child(1){
            color: rgb(20, 20, 20);
            border-color: rgb(17, 17, 17);
          }
          :nth-child(2){
            color: rgb(22, 21, 21);
            // font-weight:normal;
          }
        }
         .top_twoC{
          :nth-child(1){
            color: #25b113;
            border-color: #25b113;
          }
          :nth-child(2){
            color: #25b113;
            // font-weight:normal;
          }
        }

        .top_three{
          :nth-child(1){
            color: rgb(169, 167, 167);
            border-color: rgb(169, 167, 167);
          }
          :nth-child(2){
            color: rgb(169, 167, 167);
            // font-weight:normal;
          }
        }

         .top_threeB{
          :nth-child(1){
            color: black;
            border-color: black;
          }
          :nth-child(2){
            color: black;
            // font-weight:normal;
          }
        }
         .top_threeC{
          :nth-child(1){
            color: #25b113;
            border-color: #25b113;
          }
          :nth-child(2){
            color: #25b113;
            // font-weight:normal;
          }
        }

        .d{
          :nth-child(1){
            color: rgb(169, 167, 167);
            border-color: rgb(169, 167, 167);
          }
          :nth-child(2){
            color: rgb(169, 167, 167);
            font-weight:normal;
          }
        }

         .top_fourB{
          :nth-child(1){
            color: black;
            border-color: black;
          }
          :nth-child(2){
            color: black;
            // font-weight:normal;
          }
        }

      }
    }
  }
</style>





